<template>
  <div>
    <h1>我是productList</h1>

    <el-button type="primary" @click="handleAdd">新增</el-button>

    <el-table :data="currentPageTableData" style="width: 100%">
      <el-table-column type="index" :index="1" :width="100" label="序号">
      </el-table-column>

      <el-table-column
        v-for="(item, index) in tableDataTitle"
        :key="item.label"
        :prop="item.prop"
        :label="item.label"
        :width="item.minWidth"
      >
        <template slot-scope="scope">
          <template v-if="item.label === '头像'">
            <el-image
              style="width: 120px"
              :src="hostUrl + scope.row[item.prop]"
              :preview-src-list="previewSrcList"
            />
          </template>

          <template v-else>
            {{ scope.row[item.prop] }}
          </template>
        </template>
      </el-table-column>

      <el-table-column>
        <template slot="header" slot-scope="scope"> 操作 </template>
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
            >Edit</el-button
          >
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
            >Delete</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[2, 3, 4, 5]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="tableData.length"
    >
    </el-pagination>

    <el-dialog :visible.sync="dialogVisible">
      姓名： <el-input v-model="editInformation.name" placeholder="请输入姓名"></el-input>
      图片：
      <el-upload
        class="upload-demo"
        action="#"
        :limit="1"
        :on-change="handleChange"
        :on-preview="handlePictureCardPreview"
        :on-remove="handlePictureCardRemove"
        :auto-upload="false"
        list-type="picture-card"
        :before-remove="beforeRemove"
      >
        <el-button size="small" type="primary">选择图片</el-button>
      </el-upload>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="confirmChange">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { uploadFile, getAllUser, addUser } from "@/api/api.js";
export default {
  name: "",
  data() {
    return {
      hostUrl: "http://localhost:3001/",
      tableDataTitle: [
        {
          label: "序号",
          minWidth: 180,
        },
        {
          label: "姓名",
          minWidth: 180,
          prop: "name",
        },
        {
          label: "头像",
          minWidth: 250,
          prop: "image",
        },
      ],
      tableData: [],
      currentPageTableData: [],
      currentPage: 1,
      pageSize: 2,

      previewSrcList: [],
      dialogVisible: false,
      dialogImageUrl: "",

      editInformation: {
        name: "",
        image: "",
      },
      isAddUser: null,
    };
  },
  mounted() {
    // console.log("mounted");
    // this._getAllUser();
  },
  methods: {
    async _getAllUser() {
      let result = await getAllUser();
      console.log("result", result);
      this.tableData = result;

      this.pagination();

      this.previewSrcList = result.map((item) => this.hostUrl + item.image);

      console.log("this.tableData", this.tableData);
    },

    pagination() {
      this.currentPageTableData = this.tableData.slice(
        (this.currentPage - 1) * this.pageSize,
        this.currentPage * this.pageSize
      );
    },

    handleAdd() {
      console.log("this.editInformation", this.editInformation);

      this.isAddUser = true;

      this.editInformation = {
        name: "",
        image: "",
      };

      this.dialogVisible = true;
    },
    handleEdit(index, row) {
      console.log(index, row);

      this.isAddUser = false;

      this.dialogVisible = true;

      this.editInformation = this._.cloneDeep(row);
      // this.fileList[0].url = this.hostUrl + this.editInformation.image;
    },
    async confirmChange() {
      let formdata = new FormData();

      console.log("this.editInformation", this.editInformation);

      for (const key in this.editInformation) {
        formdata.append(key, this.editInformation[key]);
      }

      if (this.isAddUser) {
        let result = await addUser(formdata);
        console.log("addUser的result", result);
      } else {
        let result = await uploadFile(formdata);
        console.log("uploadFile的result", result);
      }

      this._getAllUser();

      this.dialogVisible = false;
    },
    handleChange(file) {
      console.log("handleChange", file);
      console.log("handleChange", file.raw);

      this.editInformation.image = file.raw;
    },

    handleSizeChange(pageSize) {
      this.pageSize = pageSize;

      this.pagination();
    },

    handleCurrentChange(page) {
      this.currentPage = page;
      this.pagination();
    },

    handlePictureCardPreview(file) {
      console.log("handlePictureCardPreview", file);
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },

    handlePictureCardRemove(file) {
      console.log("handlePictureCardRemove", file);
    },

    beforeRemove(file) {
      console.log("beforeRemove", file);
    },
  },
};
</script>

<style lang="scss" scoped></style>
